<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		canvas{
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="500">你的浏览器不支持canvas</canvas>
	<script type="text/javascript" src="js/underscore-min.js"></script>
	<script type="text/javascript">
		//得到标签
		var canvas = document.getElementById("canvas");
		//上下文
		var ctx = canvas.getContext("2d");
		
		//小球类
		function Ball(x,y){
			this.x = x;
			this.y = y;
			this.r = 30;
			this.color = "blue";

			//x的移动大小
			this.dX = Math.random() * 10 - 5;	//-5~5
			this.dY = Math.random() * 10 - 5;	//-5~5

			//半径的衰减
			this.dR = Math.random()  + 0.3;	//1~2

			//将实例化的小球放到数组里面
			ballArray.push(this);
		}
		//小球的原型
		Ball.prototype = {
			//更新自己
			update : function(){
				this.x += this.dX;
				this.y += this.dY;
				this.r -= this.dR;
				if(this.r <= 0){
					this.r = 0.1;
					//在数组中删除自己，借助underscroe的API
					ballArray = _.without(ballArray,this);
				}
			},
			//渲染自己
			render : function(){
				//绘制圆的API：
				ctx.beginPath();
				ctx.arc(this.x , this.y , this.r , 0 , Math.PI * 2 , true);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}

		//小球数组
		var ballArray = new Array();

		//定时器
		setInterval(function(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			for(var i = 0 ; i < ballArray.length ; i++){
				//update可能把自己删了
				ballArray[i].update();
				//所以要验证这哥们还存在呢。
				if(ballArray[i]){
					ballArray[i].render();
				}
			}
		},20);


		//监听
		canvas.addEventListener("mousemove", function(event){
			new Ball(event.offsetX , event.offsetY);
		});
	</script>
</body>
</html>